<template>
    <div>
        <!-- 对象 -->
        <h4>{{ user.name }}今年{{ user.age }}岁了 </h4>
        <!-- 数组 -->
        <ul>
            <li v-for="(item,index) in list" :key="index">
                {{ item.id }}:{{ item.title }}
            </li>
        </ul>
        <!-- 触发 -->
        <button @click="list[0].id++">修改东风破的id</button>
        <button @click="user.age++">过年涨一岁</button>
        <button @click="user.name = '小谢'">谢建亮改名了</button>
    </div>
</template>
<script>
export default {
    watch:{
        //监听数组的变化
        list:{
            deep:true,
            handler(newList){
                console.log(newList)
            }
        },

        //只对对象里的某一项监听
        // "user.age"(value){
        //     if(value === 36){
        //         alert("老谢要退休了")
        //     }
        // },
        //对对象监听,当对象里的任意属性发生改变就触发
        user(value){
            deep:true,
            //当watch遇到对象或数组类型的数据,会产生以
            //watch监听是浅监听,对数组对对象需要开启深度监听
            console.log(value)
        },
        //开启深度监听
        user:{
            //deep:true 开启深度监听
            //handler:监听函数
            handler(value){
                console.log(value.age)
            },
            deep:true,
        }
    },
    data(){
        return{
            //对象
            user:{
                name:"老谢",
                age:35
            },
            //数组
            list:[
                { id:1,title:"东风车产" },
                { id:2,title:"保时捷" },
            ]
        }
    }
}
</script>